body {
    background-image: url(../img/login-tu.png);

    header {
        width: 1000px;
        height: 80px;
        margin-left: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // background-color: aqua;

        >.headleft {
            width: 200px;
            height: 30px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            color: #7f7f7f;
            // background-color: chartreuse;

            >p:hover {
                color: gainsboro;
            }
        }

        >.headright {
            width: 200px;
            height: 30px;
            color: #7f7f7f;
            display: flex;
            justify-content: space-around;
            align-items: center;
            // background-color: cornsilk;

            >select {
                border: none;
                width: 85px;
                height: 18px;
                color: #7f7f7f;
                font-size: 16px;

                >option {
                    width: 85px;
                    text-align: center;
                }
            }
        }
    }

    section {
        height: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        // background-color: aqua;

        >.logotop {
            width: 153px;
            height: 50px;
            background-image: url(../img/login-logo.png);
            background-repeat: no-repeat;
            background-position: 50%;
            background-size: 153px;
            // background-color: chartreuse;
        }

        >p {
            font-size: 13px;
        }
    }

    main {
        height: 530px;
        display: flex;
        justify-content: center;
        align-items: center;
        // background-color: aqua;

        >.info {
            width: 350px;
            height: 400px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            background-color: white;
            background-image: linear-gradient(45deg, white, pink, skyblue);
            background-size: 400%;
            animation: identifier 8s infinite;
            @keyframes identifier {
                0% {
                    background-position: 0% 50%;
                }

                50% {
                    background-position: 100% 50%;
                }

                100% {
                    background-position: 0% 50%;
                }
            }


            >.title {
                width: 200px;
                height: 50px;
                font-size: 25px;
                text-align: center;
                line-height: 50px;
                // background-color: floralwhite;
            }

            >input {
                width: 300px;
                height: 45px;
                border-radius: 5px;
                padding: 10px 15px;
                background-color: #f7f7f7;
            }

            >.forget {
                width: 300px;
                height: 36px;
                line-height: 36px;
                font-size: 12px;
                // background-color: chocolate;

                >a {
                    color: black;
                }
            }

            >button {
                width: 300px;
                height: 48px;
                line-height: 48px;
                text-align: center;
                font-size: 15px;
                color: #fff;
                border-radius: 9px;
                border: none;
                background-color: #2ad181;
            }

            >.operation {
                width: 300px;
                height: 30px;
                font-size: 12px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                // background-color: deeppink;

                >.a1 {
                    color: black;
                    opacity: 0.6;
                    transition: 0.3s;
                    transition-property: all;
                    transition-duration: 0.3s;
                    transition-timing-function: ease;
                    transition-delay: 0s;
                }

                >.a2 {
                    color: #2ad181;
                    opacity: 0.6;
                    transition: 0.3s;
                    transition-property: all;
                    transition-duration: 0.3s;
                    transition-timing-function: ease;
                    transition-delay: 0s;
                }
            }
        }


    }

    footer {
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;

        // background-color: lawngreen;
        >.copyright {
            width: 500px;
            height: 25px;
            text-align: center;
            color: #9b9b9b;
            font-size: 12px;
            line-height: 25px;
            //   background-color: lavender;
        }
    }

}

@media all and (min-width:1200px) {
    body {
        position: absolute;
        right: -435px;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

@media all and (min-width:1025px) and (max-width:1190px) {
    body {
        position: fixed;
        left: -235px;
        top: 50%;
    }
}

/* 在768-1024之间 */
@media all and (min-width:768px) and (max-width:1024px) {
    body {
        position: fixed;
        left: -115px;
        top: 50%;
    }
}

@media all and (max-width:768px) {
    body {
        position: fixed;
        left: 85px;
        top: 50%;
    }

}